<html>
  <head>
    <meta charset="utf-8">
    <link href="report.css" rel="stylesheet">
    <title>Report</title>
    <meta name="description" content="Report example">
  </head>

  <body>
    <article id="cover">
      <h1>Report example</h1>
      <address>
        WeasyPrint
        26 rue Emile Decorps
        69100 Villeurbanne France
      </address>
      <address>
        contact@courtbouillon.org
        https://courtbouillon.org
      </address>
    </article>

    <article id="contents">
      <h2>Table of contents</h2>
      <h3>Part one</h3>
      <ul>
        <li><a href="#columns-title"></a></li>
        <li><a href="#skills-title"></a></li>
      </ul>

      <h3>Part two</h3>
      <ul>
        <li><a href="#offers-title"></a></li>
        <li><a href="#chapter-title"></a></li>
        <li><a href="#typography-title"></a></li>
      </ul>
    </article>

    <article id="columns">
      <h2 id="columns-title">Big title on left page, with text on columns</h2>

      <h3>This is a little subtitle, here to explain what we are talking about</h3>

      <section>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat faucibus vestibulum.
          Mauris varius orci quam. Nam dui mauris, dictum at elementum at, mollis pulvinar est.
          Nunc lobortis pharetra erat, id rutrum lorem malesuada in.
        </p>
        <p>
          Phasellus id nisl nec arcu tempor ultricies non id tortor. Mauris ex nibh, viverra vitae nisi eget, placerat pharetra est.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id maximus diam. Cras molestie nisl vitae iaculis convallis.
          Vivamus molestie vitae nisl sed interdum. Nunc aliquam massa rhoncus finibus convallis.
          Vivamus sed vulputate risus. Nunc dignissim magna velit, quis lobortis ex volutpat eget.
          Proin dictum mauris condimentum consequat faucibus.
        </p>
        <p>
          Duis maximus mauris ac purus eleifend, sit amet blandit nulla lacinia.
          Maecenas massa dolor, suscipit at erat eget, maximus dignissim dolor. Praesent consectetur maximus libero, eu facilisis ligula finibus et.
          Cras rhoncus eros sit amet lorem auctor, a efficitur leo tincidunt. Sed viverra interdum odio, eget pulvinar tortor blandit lacinia.
          Praesent consequat congue commodo. Phasellus eu massa feugiat, imperdiet nisi a, sagittis ipsum.
        </p>
        <p>
          Suspendisse et gravida nunc. Quisque at felis nisl. Nam eget efficitur nunc.
          Vivamus fermentum imperdiet massa, porttitor elementum mauris faucibus scelerisque.
          Pellentesque ut metus tortor. Fusce vulputate ex at turpis consectetur, in vestibulum odio placerat.
          Suspendisse tempor sapien rutrum, cursus sem a, tincidunt odio. Sed in consequat augue.
          Proin finibus felis neque, ac hendrerit lorem consequat nec.
        </p>
        <p>
          Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce quam mi, dapibus et augue sit amet, porttitor volutpat orci.
          Vestibulum ac ligula at justo placerat pulvinar vel non velit. Duis vel iaculis nibh, non tristique lectus.
          Phasellus vel ex bibendum, accumsan tellus a, commodo nisi.
        </p>
        <p>
          Mauris tincidunt dolor ligula, et egestas lectus rutrum consectetur. Donec ac ex mollis, vestibulum libero in, convallis risus.
        </p>
      </section>
    </article>

    <article id="skills">
      <h2 id="skills-title">This is another big title, on a page full of work presentation</h2>

      <h3>We present you some of WeasyPrint's features.</h3>

      <section id="table-content">
        <h4>Table of contents</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi ante, tincidunt quis vehicula
          sed, vehicula sed augue. Cras eget ante turpis.
        </p>
      </section>

      <section id="heading">
        <h4>Heading titles and page counters</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi ante, tincidunt quis vehicula
          sed, vehicula sed augue. Cras eget ante turpis.
        </p>
      </section>

      <section id="multi-columns">
        <h4>Multi-column text</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi ante, tincidunt quis vehicula
          sed, vehicula sed augue. Cras eget ante turpis.
        </p>
      </section>

      <section id="internal-links">
        <h4>Internal links</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi ante, tincidunt quis vehicula
          sed, vehicula sed augue. Cras eget ante turpis.
        </p>
      </section>

      <section id="style">
        <h4>Different page types</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi ante, tincidunt quis vehicula
          sed, vehicula sed augue. Cras eget ante turpis.
        </p>
      </section>
    </article>

    <article id="offers">
      <h2 id="offers-title">Big title on the first right page</h2>

      <section>
        <h4>Offer #1</h4>
        <p>€135</p>
        <ul>
          <li>Lorem ipsum dolor sit amet.</li>
          <li>Nullam at diam eget urna consequat.</li>
          <li>Sed fringilla quam at augue semper aliquam.</li>
          <li>Cras nec lacus eu turpis finibus vulputate.</li>
        </ul>
      </section>

      <section>
        <h4>Offer #2</h4>
        <p>€175</p>
        <ul>
          <li>Lorem ipsum dolor sit amet.</li>
          <li>Nullam at diam eget urna consequat.</li>
          <li>Sed fringilla quam at augue semper aliquam.</li>
          <li>Mauris viverra nulla vel semper mollis.</li>
          <li>Nulla quis massa eu urna suscipit vehicula.</li>
          <li>Curabitur a odio id risus pharetra iaculis.</li>
        </ul>
      </section>

      <section>
        <h4>Offer #3</h4>
        <p>€200</p>
        <ul>
          <li>Lorem ipsum dolor sit amet.</li>
          <li>Nullam at diam eget urna consequat.</li>
          <li>Sed fringilla quam at augue semper aliquam.</li>
          <li>Mauris viverra nulla vel semper mollis.</li>
          <li>Cras nec lacus eu turpis finibus vulputate.</li>
          <li>Nulla quis massa eu urna suscipit vehicula.</li>
          <li>Curabitur a odio id risus pharetra iaculis.</li>
          <li>Mauris viverra nulla vel semper mollis.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
        </ul>
      </section>
    </article>

    <article id="chapter">
      <h2 id="chapter-title">This is a chapter of a new section</h2>
    </article>

    <article id="typography">
      <h2 id="typography-title">About some typography features</h2>

      <section>
        <h4>Italic and Bold Text</h4>
        <p>
          Lorem ipsum dolor <em>sit amet, consectetur adipiscing elit.</em> Ut
          pulvinar dolor <strong>ac orci finibus elementum. Praesent</strong>
          sit amet ligula turpis.
        </p>
      </section>

      <section id="small-caps">
        <h4>Small Caps Text</h4>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pulvinar
          dolor ac orci finibus elementum.
        </p>
      </section>

      <section id="ligatures">
        <h4>Ligatures</h4>
        <dl>
          <dt>Classical</dt>
          <dd><span class="none">Offer</span> → <span class="common">Offer</span></dd>
          <dt>Discretionary</dt>
          <dd><span class="none">Often</span> → <span class="discretionary">Often</span></dd>
          <dt>Contextual</dt>
          <dd><span class="none">#&amp;</span> → <span class="contextual">#&amp;</span></dd>
        </dl>
      </section>

      <section id="numbers">
        <h4>Numbers</h4>
        <dl>
          <dt>Fractions</dt>
          <dd>421/42 → <span id="fractions">421/42</span></dd>
          <dt>Ordinals</dt>
          <dd>2a 3o → <span id="ordinals">2a 3o</span></dd>
          <dt>Slashed zero</dt>
          <dd>1000 → <span id="slashed">1000</span></dd>
          <dt>Superscript</dt>
          <dd>a2 → <span id="super">a2</span></dd>
          <dt>Subscript</dt>
          <dd>C8H10N4O2 → <span id="sub">C8H10N4O2</span></dd>
        </ul>
      </section>

      <section id="figures">
        <h4>Figures</h4>
        <dl>
          <dt>Lining</dt>
          <dd>
            <ul>
              <li>409,280</li>
              <li>367,112</li>
            </ul>
          </dd>
          <dt>Old-Style</dt>
          <dd>
            <ul id="oldstyle">
              <li>409,280</li>
              <li>367,112</li>
            </ul>
          </dd>
          <dt>Tabular</dt>
          <dd>
            <ul id="tabular">
              <li>409,280</li>
              <li>367,112</li>
            </ul>
          </dd>
          <dt>Old &amp; Tab.</dt>
          <dd>
            <ul id="old-tabular">
              <li>409,280</li>
              <li>367,112</li>
            </ul>
          </dd>
        </dl>
      </section>
    </article>
  </body>
</html>
